<template>
  <UseTemplate>
    <template #sou>
      <van-search
        v-model="objs.newsTitle"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onClickButton">搜索</div>
        </template>
      </van-search>
    </template>
    <template #nero>
      <div class="usz-1">
        <CpRadioBtn title="资讯" @cadd="zgadd"></CpRadioBtn>
        <div
          class="usz-2"
          v-for="(item, index) in list"
          :key="index"
          @click="geturl(item)"
        >
          <div class="usz-2-1">{{ item.newsTitle }}</div>
          <div class="usz-2-2">
            <div class="usz-2-2-1">{{ item.publishTime }}</div>
            <div class="usz-2-2-1">招生动态</div>
          </div>
        </div>
      </div>
      <div class="ust-2">
        <CpRadioBtn title="推荐服务"></CpRadioBtn>
        <div class="ust-2-1">
          <div
            class="ust-2-1-1"
            v-for="(item, index) in tjarr"
            :key="index"
            @click="tjadd(item)"
          >
            <div class="uet">
              <div>{{ item.appName }}</div>
              <div class="usd-1">{{ item.constructionUnit }}</div>
            </div>
            <img :src="item.iconUrl" class="ut-img" />
          </div>
        </div>
      </div>
    </template>
  </UseTemplate>
</template>

<script lang="ts" setup>
import { showToast } from 'vant'
import { ref, onMounted } from 'vue'
import { getNewsList } from '@/services/user'
import { useRouter } from 'vue-router'
import { useListStore } from '@/stores'
import { getCommon } from '@/utils/Commonmethod'
const setList = useListStore()
const onSearch = () => {
  getlist()
}
const onClickButton = () => {
  getlist()
}
const list: any = ref([])
const tjarr: any = ref([])
const objs = ref({
  pageNum: 1,
  pageSize: 5,
  newsTitle: ''
})
const getlist = async () => {
  const res = await getNewsList(objs.value)
  list.value = res.rows
  if (res.rows.length === 0) {
    showToast('暂无数据')
  }
}
const geturl = (item: any) => {
  getCommon({
    monitorType: 'news',
    monitorId: item.newsId,
    monitorStatus: '1'
  })
  window.location.href = item.newsLink
}

const router = useRouter()
const zgadd = () => {
  router.push('/Announcement')
}
const tjadd = (item: any) => {
  getCommon({
    monitorType: 'app',
    monitorId: item.id,
    monitorStatus: '1'
  })
  window.open(item.appUrl)
}
onMounted(() => {
  tjarr.value = setList.tjlist.slice(0, 4)
  getlist()
})
</script>

<style lang="scss" scoped>
:deep() .van-nav-bar__content {
  background: #2463fe;
  color: #fff;
}
.van-nav-bar {
  background: #2463fe;
}
:deep() .van-nav-bar__title {
  color: #fff;
}
.van-hairline--bottom:after {
  border-bottom-width: 0px;
}

.van-search {
  padding: 0;
  border-radius: 2px;
}

.usz-1 {
  width: 100%;
  min-height: 309px;
}
.usz-2 {
  width: 100%;
  height: 71px;
  padding: 11px;
  margin: 5px 0;
  box-sizing: border-box;
}
.usz-2-1 {
  font-weight: 500;
  font-size: 15px;
  color: #333333;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 使用省略号显示截断的文本 */
}
.usz-2-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.usz-2-2-1 {
  font-weight: 400;
  font-size: 11px;
  color: #777777;
}
.ust-2 {
  width: 100%;
  height: 183px;
  padding: 11px;
  box-sizing: border-box;
}
.ust-2-1 {
  width: 100%;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.ust-2-1-1 {
  width: 48%;
  height: 59px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uet {
  width: 94px;
  height: 40px;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}
.usd-1 {
  font-weight: 400;
  font-size: 12px;
  color: #333333;
}
.ut-img {
  width: 40px;
  height: 40px;
}
</style>
